import React from "react";
const Info = () =>{
    const navigate = React.Router.useNavigate();
    const [ SearchParams ] = React.Router.useSearchParams();
    // console.log(SearchParams.get('id'));
    const [id,setId] = React.useState(SearchParams.get('id') || 0);
    const [business,setBusiness] = React.useState(React.Cookies.load('business') || {});
    const [info,setInfo] = React.useState({});
    //上一篇文章
    const [prev,setPrev] = React.useState({});
    //下一篇文章
    const [next,setNext] = React.useState({});

    //请求数据
    React.useEffect(() => {
        getInfoData();
    },[id]);

    const getInfoData = async () =>{
        let result = await React.Http.POST({
            url:'category/info',
            params:{
                id,
                busid:business.id
            }
        });
    
        if(result)
        {
            if(result.code === 0)
            {
                React.Vant.Notify.show({
                    type:'warning',
                    message:result.msg,
                    duration:1500,
                    onClose:() => {
                        navigate(-1);
                    }
                });

                return;
            }

            setInfo(result.data.info);
            setPrev(result.data.prev || {});
            setNext(result.data.next || {});
        }


    }

    const Prev = () =>
    {
        const onPrev = () =>{
            setId(prev.id);
            navigate('/category/info?id=' + prev.id);
        }

        if(prev.id)
        {
            return (
                <>
                    <p>上一篇：<a onClick={onPrev}>{prev.name}</a></p>
                </>
            )
        }else{
            return (
                <>
                    <p>上一篇：<a>已到顶了</a></p>
                </>
            )
        }
    }

    const Next = () =>
    {
        const ToNext = () =>
        {
            setId(next.id);
            navigate('/category/info?id=' + next.id);
        }

        if(next.id)
        {
            return (
                <>
                    <p>下一篇：<a onClick={ToNext}>{next.name}</a></p> 
                </>
            )
        }else{
            return (
                <>
                    <p>下一篇：<a>已到底了</a></p> 
                </>
            )
        }
    }


    const onBack = () =>{
        navigate('/category/index');
    }

    return (
        <>
           <React.Vant.Sticky>
                <React.Vant.NavBar
                    title="学术详情"
                    leftText="返回"
                    onClickLeft={onBack}
                />
            </React.Vant.Sticky>

            <div className="xs_Xiangq">
                <div className="bt">
                    <h2>{info.name}</h2>
                    <div className="text">
                        <span>2020-03-13</span>
                        <span>作者：{info.nickname}</span>
                    </div>
                </div>
                <div className="wom_de" dangerouslySetInnerHTML={{__html:info.description}}>
                    
                </div>
                
                <div className="niming_sq niming_sq_xs_xq">
                    <a href="#"> <img src="images/sc.png" alt="" />收藏</a>
                </div>
            </div>

            <div className="rem2"></div>
            <div className="shangxia_piab">
                <Prev />
                <Next />
            </div>
        </>
    )
}

export default Info;